<!-- 模板 -->
<template>
    <div class="app__body" :class="{'app__body--show': isRunAnimation}" v-if="isShowPage">
        <header class="app__header">
            <span class="app__header__logo"></span>
            <div class="app__header__city" @click='showCity'>
                <i class="app__header__city__icon aui-icon aui-icon--location"></i>
                <label class="app__header__city__name">{{ currentCityInfo.cityName }}</label>
            </div>
        </header>
        
        <div class="main">
            <div class="main__banner">
                <div class="main__banner__inner" id="A_Banner" v-if="currentActivityInfo && currentActivityInfo.current">
                    <div class="main__banner__items">
                        <template v-for="img in currentActivityInfo.current.carImgs">
                            <div  class="main__banner__items__item">
                                <img :src="aliyun + img">
                            </div>
                        </template>
                    </div>
                </div>
               
                <div class="main__scribe">
                    <div class="main__scribe__partin">
                        <i class="main__scribe__partin__icon aui-icon aui-icon--hot"></i>{{ currentActivityInfo.current.joinNum }}人参与
                    </div>
                    <div class="main__scribe__rule" @click="showRule"> 
                        <i class="main__scribe__rule__icon aui-icon aui-icon--copy"></i>活动规则
                    </div>
                </div>
            </div>
            <div class="main__activityinfo">
                <div class="main__activityinfo__carinfo">
                    <div class="main__activityinfo__carinfo__price">
                        <label>{{ currentActivityInfo.current.limitPrice }}</label>
                        <div class="unit"><em>元</em>
                        <span>/ 本周末</span></div>
                    </div>
                    <div class="main__activityinfo__carinfo__names">
                        <span :class="{'showPop': isSignup}">{{ currentActivityInfo.current.prizeLimit }}个名额</span>
                        <label>{{ currentActivityInfo.current.name }}</label>
                        <em>{{ currentActivityInfo.current.originPrice }}元/周末</em>
                    </div>
                </div>
                <div class="main__activityinfo__timecon">
                    <h2>离“秒杀开始”还剩:</h2>
                    <div class="main__activityinfo__timecon__countdown">
                        <div class="item">{{currentCountDownDay}}</div>
                        <span>天</span>
                        <div class="item">{{currentCountDownHour}}</div>
                        <span>时</span>
                        <div class="item">{{currentCountDownMins}}</div>
                        <span>分</span>
                        <div class="item">{{currentCountDownSec}}</div>
                        <span>秒</span>
                    </div>
                    <h6>{{  currentActivityInfo.current.startTime | dateformat}} 准时开抢</h6>
                </div>

                <div class="main__activityinfo__btns">
                    <div class="app-btn--booking" v-show="!isSignup">
                        <x-button text="立即报名" @on-click="signUp" :type="'primary'"></x-button>
                    </div>
                    
                    <div class="app-btn--booking" v-show="isSignup && !isSubScribe && canKill">
                        <x-button text="立即开抢" @on-click="startKill" :type="'primary'"></x-button>
                    </div>
                    
                    <div class="app-btn--booking" v-show="isSignup && !isSubScribe && !canKill">
                        <x-button text="暂未开始，点击预约" @on-click="showQR" :type="'primary'"></x-button>
                    </div>

                    <div class="app-btn--booking" v-show="isSignup && isSubScribe && !canKill">
                        <x-button text="立即开抢" @on-click="showNoHurry" :type="'default'"></x-button>
                    </div>

                    <div class="app-btn--booking" v-show="isSignup && isSubScribe && canKill">
                        <x-button text="立即开抢" @on-click="startKill" :type="'primary'"></x-button>
                    </div>
                </div>

                <div class="main__activityinfo__heart">
                    <img src="../assets/images/cubic.gif">
                </div>

                <div class="main__activityinfo__sb__tip" v-if="isSignup && timeover15 && isSubScribe" :class="{'popShow': isSignup && !canKill && timeover15}">
                    <div class="people" v-show="!hiddenXiaoren"></div>
                    <div class="tip" v-show="!hiddenXiaoren">
                        <p>主人，秒杀还没开始<br>去社区看看其他活动</p>
                    </div>
                    <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed08ecec63f0dfb4&redirect_uri=http%3A%2F%2Fapi.community.qingger.com%2Fauth%2FwxAuthCode%3FredirectUrl%3Dhttp%253A%252F%252Fcommunity.qingger.com%253FgrpAppId%253DAUTO&response_type=code&scope=snsapi_userinfo&state=mine&component_appid=wx8e88ab6154cbcd23#wechat_redirect" class="at_bbs"></a>
                </div>
            </div>
            <div class="main__nextactivitys" :class="{'nodata': currentActivityInfo.nexts && currentActivityInfo.nexts.length <= 0}">
                <ul v-if="currentActivityInfo.nexts && currentActivityInfo.nexts.length > 0">
                    <template v-for="item in currentActivityInfo.nexts">
                        <li class="main__nextactivitys__item">
                            <div class="main__nextactivitys__item__imgcon">
                                <img :src="aliyun + item.carImgs[0]">
                                <div class="main__nextactivitys__item__countdown">
                                    <label>{{ item.startTime | dateformat }}</label>
                                    <div class="main__nextactivitys__item__countdown__time">
                                        {{ nextActivityCountDownList[item.id] | countdown }}
                                    </div>
                                </div>
                            </div>
                            <div class="main__nextactivitys__item__carinfo">
                                <h2>{{item.name}}</h2>
                                <h3><em>￥</em>{{item.limitPrice}}<label>/两天</label></h3>
                                <em>{{item.originPrice}}元/周末</em>
                                <a href="javascript:;" @click="settingTip(item.id)" class="app-btn app-btn--setting" :class="{'app-btn--done': item.isRemind}">
                                    <i class="aui-icon aui-icon--countdown"></i>
                                    {{ item.isRemind? '预约成功': '开抢提醒' }}
                                </a>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>

        <!-- 三字经 -->
        <san-zi-jing :is-show="isSanzijingShow" @on-success='onSanzijingSuccess' @on-hide='snazijingHide'></san-zi-jing>
    </div>
</template>


<!-- js -->
<script>
    import _ from 'lodash'
    import xButton from '../components/x-button/';
    import { DB } from '../config/db.js';
    import Swipe from '../libs/swipe.js';
    import SanZiJing from './popups/sanzijing.vue';
    import wxEvent from '../filter/wxconfig.js';

    export default{
        data(){
            return{
                isRunAnimation: !1,
                // 等待拿到数据之后再进行显示
                isSignSuccess: !1,
                hiddenXiaoren: !1,
                // 是否开抢
                canKill: false,
                isSignup: false,
                aliyun: DB.aliyundomain,
                countDownTime: 0,
                currentCountDownDay: '00',
                currentCountDownHour: '00',
                currentCountDownMins: '00',
                currentCountDownSec: '00',
                currentSetTime: null,
                swiper: null,
                isSubScribe: '',
                serverTime: 0,
                nextActivityCountDownTime: new Date().getTime(),
                timeover15: false,
                isBind: '',
                nextActivityCountDownList: {},
                isSanzijingShow: false
            }
        },
        methods: {
            // 显示城市
            showCity(){
                if(this.isSignup){
                    return;
                }
                this.$store.commit('changeCity', true);
            },
            snazijingHide(){
                this.isSanzijingShow = false;
            },
            // 显示规则
            showRule(){
                this.$store.commit('showRulePop', true);
            },
            // 显示报名成功
            showSignSuccess(flag){
                this.$store.commit('showSignSuccessPop', flag)
            },
            // 显示二维码
            showQR(){
                wxEvent.tongjiEvents(this.$store, 'nostart');
                this.$store.commit('showQRPop', true);
            },
            // 显示输入手机号绑定
            showBind(){
                this.$store.commit('showBind', true);
            },
            // 显示客观别急
            showNoHurry(){
                wxEvent.tongjiEvents(this.$store, 'seckill_gray');
                this.$store.commit('showNoHurryPop', true);
            },
            // 分享 已关注
            showShareSignAttentionY(){
                this.$store.commit('showShareSignAttentionYPop', true);
            },
            // 
            showShareSignAttentionN(){
                this.$store.commit('showShareSignAttentionNPop', true);
            },
            // 获奖分享浮层
            showShareWinner(){
                this.$store.commit('showShareWinnerPop', true);
            },
            // 判断是否报名
            isSign(){
                for(let i = 0; i < this.activityList.length; i ++){
                    if(this.activityList[i].current && this.activityList[i].current.isSignup == 1){
                        this.isSignup = true;

                        let currentCity = _.find(this.$store.getters.cityList, {'cityCode': this.activityList[i].cityCode});

                        this.$store.commit('setCurrentCityInfo', currentCity);

                        localStorage["hcxsq_current_city_info"] = JSON.stringify(currentCity);

                        break;
                    }
                }
            },
            // 计算倒计时 存入到一个对象中，便于代理
            calcNextsCountDown(){
                let o = {};
                for(let i = 0; i < this.activityList.length; i ++){
                    if(!this.activityList[i].nexts){
                        break;
                    }
                    for(let j = 0; j < this.activityList[i].nexts.length; j ++){
                        o[this.activityList[i].nexts[j].id] = new Date(this.activityList[i].nexts[j].startTime.replace(/-/g, '/')).getTime();
                    }
                }

                this.$set(this.$data, 'nextActivityCountDownList', o);
            },
            // 倒计时
            startRunCountDown: function(){
                this.countDownTime = this.startTime - this.serverTime;
                if(this.countDownTime <= 0){
                    this.canKill = true;
                    this.currentSetTime && clearTimeout(this.currentSetTime);
                    return;
                }

                this.serverTime += 1000;
                this.currentSetTime = setTimeout(() => {
                    this.startRunCountDown();
                }, 1000);
            },
            // 报名
            signUp(){
                wxEvent.tongjiEvents(this.$store, 'signup');

                if(this.$store.state.userSubscribeInfo.bind == 1){
                    this.signUpRightNow();
                }else{
                    this.showBind();
                }
            },
            // 开始秒 弹出三字经
            startKill(){
                // 三字经验证成功
                if(this.$store.state.userSubscribeInfo.bind == 1){
                    if(this.isSignup){
                        this.isSanzijingShow = true;
                    }else{
                        this.signUpRightNow();
                    }
                }else{
                    this.showBind();
                }   
            },
            // 执行报名逻辑
            signUpRightNow(type){
                // type 1 代表填写手机新绑定的用户
                this.$aui.loading.show({
                    type: 1
                });
                return this.$http.post(DB.ip + 'activity/signup', {
                    openid: this.$store.state.userSubscribeInfo.openid,
                    activityId: this.$store.state.currentActivityInfo.current.id,
                    channel: this.$store.state.userSubscribeInfo.channel
                }).then((res) => {
                    this.$aui.loading.hide();  
                    if(res.data.resCode == '000000'){
                        this.isSignup = true;
                        if(type == 1){
                            // 需要弹出报名成功
                            this.showSignSuccess(true);
                            if(this.$store.state.userSubscribeInfo.subscribe == 0){
                                setTimeout(() =>{
                                    this.showSignSuccess(false);
                                    this.showQR();
                                }, 2000);
                            }
                        }else{
                            if(this.$store.state.userSubscribeInfo.subscribe == 1){
                                this.showShareSignAttentionY();
                            }else{
                                this.showShareSignAttentionN();
                            }
                        }
                    }else{
                        this.$aui.toast.show(res.data.resMsg);
                    }
                }, (error) => {
                    this.$aui.loading.hide(); 
                    this.$aui.toast.show('系统错误，错误码：' + error.status);
                });
            },
            // 执行代码
            initStart(){
                this.serverTime = new Date(this.$store.state.serverTime.replace(/-/g, '/')).getTime();
                this.startTime = new Date(this.$store.state.currentActivityInfo.current.startTime.replace(/-/g, '/')).getTime();
                this.isSign();
                this.currentSetTime && clearTimeout(this.currentSetTime);
                this.startRunCountDown();
                this.isSubScribe = this.$store.state.userSubscribeInfo.subscribe == 0? false : true;
                this.isBind = this.$store.state.userSubscribeInfo.bind;
                this.timeover15 = (this.startTime - this.serverTime) - 15 * 60 * 1000 > 0? true: false;
                this.nextActivityCountDown(this.serverTime);
                this.calcNextsCountDown();
                // 滚动
                this.$nextTick(() => {
                    this.swiper = new Swipe(document.getElementById("A_Banner"), {
                        continuous: false
                    });
                });
                    
                if(!this.isSignup){
                    wxEvent.tongjiEvents(this.$store, 'activity', 'activity_signup');
                }else{
                    wxEvent.tongjiEvents(this.$store, 'activity', 'activity_start');
                }
            },
            // 倒计时
            nextActivityCountDown(t){
                this.nextActivityCountDownTime = t + 1000;
                setTimeout(() => {
                    this.nextActivityCountDown(this.nextActivityCountDownTime);
                }, 1000);
            },
            // 下次提醒
            settingTip(id){
                if(this.$store.state.userSubscribeInfo.subscribe == 0){
                    this.showQR();
                    return;
                }

                if(this.$store.state.userSubscribeInfo.bind){
                    this.settingNextTip(id);
                }else{
                    this.$store.commit('nextActivityTip', id);
                    this.$store.commit('showBind', true);
                }
            },
            settingNextTip(id){
                return this.$http.post(DB.ip + 'activity/remind', {
                    openid: this.$store.state.userSubscribeInfo.openid,
                    activityId: id,
                    channel: this.$store.state.userSubscribeInfo.channel
                }).then((res) => {
                    if(res.data.resCode == '000000'){ 
                        this.$aui.toast.show({
                            duration: 3000,
                            type: 5
                        });

                        // 改变提醒的状态
                        let currentActivityInfo = this.$store.state.currentActivityInfo;

                        let settingIndex = _.findIndex(currentActivityInfo.nexts, (res) => {
                            return res.id == id;
                        });

                        if(settingIndex >= 0){
                            currentActivityInfo.nexts[settingIndex].isRemind = 1;
                        }
                        this.$store.commit('setCurrentActivityInfo', currentActivityInfo);


                        // 改变所有活动数据缓存
                        let allActivityInfo = this.$store.state.activityList;

                        let settingAllIndex = _.findIndex(allActivityInfo, (res) => {
                            if(res.current){
                                 return res.current.id == id;
                             }
                        });

                        if(settingAllIndex >= 0){
                            allActivityInfo[settingAllIndex].current.isRemind = 1;
                        }

                        this.$store.commit('setActivityData', allActivityInfo);
                    }else if(res.data.resCode == '111111'){
                        this.$aui.toast.show('开抢前我们会提醒您的，不要太心急哦~');
                    }else{  
                        this.$aui.toast.show(res.data.resMsg);
                    }
                }, (error) => {
                    this.$aui.toast.show('系统错误，错误代码：' + error.status)
                });
            },
            onSanzijingSuccess(){
                this.$aui.loading.show({
                    type: 1
                });
                return this.$http.post(DB.ip + 'activity/join', {
                    openid: this.$store.state.userSubscribeInfo.openid,
                    activityId: this.$store.state.currentActivityInfo.current.id,
                    channel: this.$store.state.userSubscribeInfo.channel
                }).then((res) => {
                    if(res.data.resCode == '000000' || res.data.resCode == '111117'){
                        res.data.data.currentActivityId = this.$store.state.currentActivityInfo.current.id;
                        this.$store.commit('setOwnPrizeInfo', res.data.data);
                        this.$router.push({name: 'winner', query: {id: this.$store.state.currentActivityInfo.current.id, channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid }});
                    }else if(res.data.resCode == '111118' || res.data.resCode == '111116'){
                        res.data.data.currentActivityId = this.$store.state.currentActivityInfo.current.id;
                        this.$store.commit('setOwnPrizeInfo', res.data.data);
                        setTimeout(() => {
                            this.$aui.loading.hide();
                            this.$router.push({name: 'fail', params: {isFirst: 1}, query: {id: this.$store.state.currentActivityInfo.current.id,channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid }});
                        }, 500);
                       
                    }else{
                        this.$aui.loading.hide();
                        this.$aui.toast.show(res.data.resMsg);
                    }
                }, (error) => {
                    this.$aui.loading.hide(); 
                    this.$aui.toast.show('系统错误，错误码：' + error.status);
                });
            }
        },
        // before
        computed: {
            // 监测当前城市
            currentCityInfo(){
                return this.$store.state.currentCityInfo
            },
            // 活动列表
            activityList(){
                return this.$store.state.activityList;
            },
            // 当前活动列表
            currentActivityInfo(){
                return this.$store.state.currentActivityInfo;
            },
            // 活动开始时间
            startTime(){
                return new Date(this.$store.state.currentActivityInfo.current.startTime.replace(/-/g, '/'));
            },
            // 显示页面  等store获取数据之后才能
            isShowPage(){
                return this.$store.state.currentActivityInfo.cityCode? true: false 
            },
            // 
            isBindSuccess(){
                return this.$store.state.isBindSuccess;
            },
            // 绑定成功之后的回调
            isNextTip(){
                return this.$store.state.isNextTipCb;
            }
        },
        watch: {
            nextActivityCountDownTime(){
                for(let i = 0; i < this.currentActivityInfo.nexts.length; i ++){
                    this.nextActivityCountDownList[this.currentActivityInfo.nexts[i].id] -= 1000
                }
            },
            // 用于监听是否绑定成功
            isBindSuccess(){
                this.signUpRightNow(1);
            },
            currentActivityInfo(){
                // 切换城市刷新
                if(this.swiper){
                    this.swiper.kill();
                    this.swiper = new Swipe(document.getElementById("A_Banner"), {
                        continuous: false
                    });
                }

                this.currentSetTime && clearTimeout(this.currentSetTime);
                this.canKill = false;
                this.startRunCountDown();
            },
            countDownTime(){
                if(this.countDownTime <= 0){
                    this.currentCountDownDay = '00';
                    this.currentCountDownHour = '00';
                    this.currentCountDownMins = '00';
                    this.currentCountDownSec = '00';
                    return;
                }
                let day, hour, mins, secs;

                day = Math.floor(this.countDownTime / 86400000);
                hour = Math.floor((this.countDownTime - day * 86400000) / 3600000);
                mins = Math.floor((this.countDownTime - day * 86400000 - hour * 3600000) / 60000);
                secs = (this.countDownTime -  day * 86400000 - hour * 3600000 - mins * 60000) / 1000;

                day = day < 10? "0"+ day: day;
                hour = hour < 10? "0"+ hour: hour;
                mins = mins < 10? "0"+ mins: mins;
                secs = secs < 10? "0"+ secs: secs;

                this.currentCountDownDay = day;
                this.currentCountDownHour = hour;
                this.currentCountDownMins = mins;
                this.currentCountDownSec = secs;
            },
            isShowPage(){
                this.initStart();
            },
            // 是否已经报名
            isSignup(){
                if(this.isSignup && !this.canKill){
                    setTimeout(() => {
                        this.isSignSuccess = !0;
                        setTimeout(() => {
                            this.hiddenXiaoren = !0;
                        }, 3000);
                    }, 1000);
                }
            },
            isNextTip(){
                this.settingNextTip(this.$store.state.isNextActivityTip);
                this.$store.commit('showBind', false);
            }
        },
        mounted(){
            this.$aui.loading.hide();

            setTimeout(() =>{
                this.isRunAnimation = !0;
            }, 1000);


            if(this.$store.state.currentActivityInfo && this.$store.state.currentActivityInfo.cityCode){
                this.initStart();
            }
        },
        components: {
            xButton,
            SanZiJing
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../styles/common/config.scss";
    .app__body{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; 
        background-color: #114384;
        color: #fff;

        &--show{
            .app__header{
                transform: perspective(400px) rotateX(0);
            }
        }
    }

    .app__header{
        width: 100%;
        height: 0.9rem;
        background-color: #1a5695;
        border-radius: 0 0 22px 22px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        transform: perspective(400px) rotateX(-90deg);
        transition: transform 0.8s cubic-bezier(.165,.84,.44,1);
        transform-origin: 50% 0;
        &__logo{
            display: block;
            width: 1.8rem;
            height: 0.6rem;
            background: url(path("logo_header.png")) 50% no-repeat;
            background-size: cover;
            position: absolute;
            top: 0.15rem;
            left: 0.35rem;
        }
        
        &__city{
            position: absolute;
            @include flexbox;
            @include flexCenterHori;
            @include flexCenterVeri;
            right: 0;
            width: 1.85rem;
            height: 0.9rem;
            font-size: 0.28rem;
            line-height: 0.9rem;
            &:after{
                width: 1px;
                height: 0.46rem;
                top: 0.22rem;
                left: 0;
                background-color: #fff;
                content: "";
                position: absolute;
            }

            &__icon{
                margin-right: 2px;
            }

            &:active{
                color: #ffca4c;
            }
        }
    }

    .main{
        position: relative;
        color: #a8a8a8;
        @at-root &__banner{
            position: relative;
            overflow: hidden;
            width: 100%;
            &:after{
                content: "";
                display: block;
                margin-top: 66.6667%;
                position: relative;
            }
            @at-root &__inner{
                width: 100%;
                height: 100%;
                position:absolute;
                top: 0;
                left: 0;
            }
            @at-root &__items{
                // @include flexbox;
                position: relative;
                overflow: hidden;

                @at-root &__item{
                    width: 100%;
                    // flex: 0 0 100%;
                    float:left;
                    position: relative;
                    overflow: hidden;
                }
            }
        }

        @at-root &__scribe{
            position: absolute;
            bottom: 0.9rem;
            width: 100%;
            height: 0.75rem;
            font-size: 0.26rem;
            color: #fff;
            @at-root &__partin{
                position: absolute;
                line-height: 0.75rem;
                left: 0.4rem;
                top: 0;
                &__icon{
                    color: #ffcb3d;
                    margin-right: 0.1rem;
                }
                &:active{
                    color: #ffca4c;
                }
            }
            @at-root &__rule{
                position: absolute;
                line-height: 0.75rem;
                right: 0.5rem;
                top: 0;
                &__icon{
                    margin-right: 0.1rem;
                }
                &:active{
                    color: #ffca4c;
                }
            }
        }

        @at-root &__activityinfo{
            width: 100%;
            background: url(path("activity_info_bg.png")) 50% 0 no-repeat;
            background-size: 100% auto;
            margin-top: -1rem;
            position: relative;
            z-index: 9;
            padding-bottom: 0.35rem;
            &:after{
                width: 1.6rem;
                height: 0.6rem;
                text-align: center;
                font-size: 0.3rem;
                color: #fff;
                content: "近期活动";
                position: absolute;
                bottom: -0.25rem;
                left: 50%;
                margin-left: -0.8rem;
                background: #114384;
                border-radius: 5px;
                line-height: 0.6rem;
            }
            @at-root &__btns{
                position: relative;
                z-index: 9;
            }
            @at-root &__heart{
                width: 100%;
                position: absolute;
                pointer-events: none;
                top: 2.8rem;
                left: 0;
                z-index: 1;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                }
            }
            @at-root &__carinfo{
                width: 100%;
                padding: 1.4rem 0 0.4rem 0;
                @include flexbox;
                @include flexCenterVeri;
                @include flexCenterHori;
                background: url(path("line_shadow.png")) 50% 100% no-repeat;
                background-size: 270px 2px;
                position: relative;
                z-index: 2;
                @at-root &__price{
                    color: #ffca4c;
                    position: relative;
                    font-size: 1.2rem;
                    padding-right: 0.25rem;
                    font-weight: bold;
                    line-height: 1.2rem;
                    margin-right: 0.3rem;
                    overflow: hidden;
                    @include flexbox;
                    >label{
                        display: block;
                    }
                    .unit{
                        height: 1rem;
                        @include flexAuto;
                        margin-top: 0.15rem;
                        em{
                            display: block;
                            font-size: 0.35rem;
                            font-weight: bold;
                            line-height: 0.5rem;
                            width: 100%;
                        }
                        span{
                            display: block;
                            width: 100%;
                            font-size: 0.24rem;
                            line-height: 0.5rem;
                            color: #fff;
                        }
                    }
                    
                    &:after{
                        width: 1px;
                        height: 90%;
                        top: 5%;
                        right: 0;
                        content: "";
                        background: #fff;
                        position: absolute;
                    }
                }

                @at-root &__names{
                    position: relative;
                    color: #fff;
                    >span{
                        min-width: 1.4rem;
                        height: 0.44rem;
                        line-height: 0.44rem;
                        padding: 0 0.2rem;
                        display: block;
                        text-align: center;
                        color: #fff;
                        position: absolute;
                        top: -0.55rem;
                        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5c34c), color-stop(100%,#ff725f));
                        border-radius: 0.22rem 0 0.22rem 0;
                        font-size: 0.24rem;
                        transform: scale(0);
                        &.showPop{
                            animation: duang 0.68s linear forwards;
                            transform: scale(1);
                        }
                    }
                    >label{
                        font-size: 0.4rem;
                        line-height: 0.6rem;
                        display: block;
                    }
                    >em{
                        font-size: 0.28rem;
                        line-height: 0.4rem;
                        position: relative;
                        &:after{
                            width: 106%;
                            height: 2px;
                            content: "";
                            background: #ed1b23;
                            position: absolute;
                            top: 0.1rem;
                            left: -3%;
                            transform: rotate(-8deg);
                        }
                    }
                }
            }
            
            @at-root &__timecon{
                padding: 0.25rem 0 0;
                position: relative;
                z-index: 9;
                color: #fff;
                >h2{
                    text-align: center;
                    font-size: 0.3rem;
                    color: #6bafef;
                    line-height: 0.5rem;
                }
                @at-root &__countdown{
                    width: 100%;
                    @include flexbox;
                    @include flexCenterHori;
                    @include flexCenterVeri;
                    margin: 0.1rem 0;
                    .item{
                        font-family: "Let's go Digital";
                        width: 0.9rem;
                        height: 0.9rem;
                        border-radius: 5px;
                        font-size: 0.68rem;
                        line-height: 0.9rem;
                        text-align: center;
                        background: #ff745e;
                        margin: 0 5px;
                    }
                }
                h6{
                    text-align: center;
                    line-height: 0.5rem;
                    font-size: 0.24rem;
                    position: relative;
                    @include flexbox;
                    @include flexCenterHori;
                    &:before{
                        width: 0.2rem;
                        height: 0.48rem;
                        margin-right: 0.1rem;
                        content: "";
                        background: url(path("icon_time_arrow.png")) 50% no-repeat;
                        background-size: 0.2rem;
                    }
                    &:after{
                        width: 0.2rem;
                        height: 0.5rem;
                        margin-left: 0.1rem;
                        content: "";
                        background: url(path("icon_time_arrow.png")) 50% no-repeat;
                        background-size: 0.2rem;
                        transform: rotate(-180deg);
                    }
                }
            }

            @at-root &__sb__tip{
                position: absolute;
                bottom: 0;
                width: 5.0rem;
                right: 0;
                z-index: 9;
                height: 2.9rem;
                pointer-events: none;
                &.popShow{
                    .people{
                        animation: duang 0.68s linear forwards;
                        transform: scale(1);
                    }
                    .tip{
                        transform: scale(1);
                        opacity: 1;
                    }
                }
                .at_bbs{
                    width: 1.4rem;
                    height: 1.4rem;
                    display: block;
                    background: url(path("gift_box.png")) 50% no-repeat;
                    background-size: cover;
                    position: absolute;
                    bottom: -0.5rem;
                    right: 0rem;
                    &:active{
                        transform: scale(1.1);
                    }
                    z-index: 4;
                    pointer-events: auto;
                }
                
                .people{
                    width: 1.24rem;
                    height: 2.5rem;
                    position: absolute;
                    background: url(path("people.png")) 50% no-repeat;
                    background-size: cover;
                    right: 0.3rem;
                    bottom: -0.05rem;
                    z-index: 3;
                    transform: scale(0);
                }
                
                .tip{
                    position: absolute;
                    width: 4.2rem;
                    right: 0.2rem;
                    background-color: rgba(0, 0, 0, 0.7);
                    color: #fff;
                    padding: 0.15rem;
                    padding-left: 0.5rem;
                    border-radius: 0.4rem 0 0 0;
                    bottom: 0.5rem;
                    right: 0.8rem;
                    opacity: 0;
                    p{
                        line-height: 0.4rem;
                        font-size: 0.3rem;
                    }
                    overflow: hidden;
                    transform: scale(0);
                    transform-origin: 100% 50%;
                    transition: all 0.3s ease-out 1s;
                }
            }
        }


        @at-root &__nextactivitys{
            position: relative;
            z-index: 10;
            padding: 0.5rem 0.35rem;
            overflow: hidden;
            
            &.nodata{
                min-height: 2.8rem;
                &:before{
                    width: 100%;
                    height: 0.6rem;
                    text-align: center;
                    font-size: 0.3rem;
                    color: #fff;
                    content: "暂无近期活动，敬请期待";
                    position: absolute;
                    top: 1rem;
                    left: 0;
                    background: #114384;
                    font-size: 0.24rem;
                    color: #e3e3e3;
                    line-height: 0.6rem;
                }
            }
            >ul{
                position: relative;
            }
            @at-root &__item{
                position: relative;
                margin-bottom: 0.2rem;
                padding: 2px;
                @include flexbox;
                background-color: #fff;
                border-radius: 4px;
                position: relative;
                @at-root &__imgcon{
                    width: 3.8rem;
                    height: 2.53333rem;
                    overflow: hidden;
                    border-radius: 4px 0 0 4px; 
                    position: relative;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                @at-root &__countdown{
                    width: 3.8rem;
                    position: absolute;
                    line-height: 0.5rem;
                    height: 0.5rem;
                    font-size: 0.24rem;
                    background-color: rgba(0, 0, 0, 0.5);
                    bottom: 0;
                    padding: 0 0.2rem;
                    color: #fff;
                    @at-root &__time{
                        position: absolute;
                        right: 0.2rem;
                        top: 0;
                        height: 0.5rem;
                        @include flexbox;
                        @include flexCenterVeri;
                        span{
                            width: 0.34rem;
                            height: 0.34rem;
                            background-color: #000;
                            line-height: 0.34rem;
                            text-align: center;
                            border-radius: 4px;
                        }
                        em{
                            padding: 0 0.05rem;
                        }
                    }
                }

                @at-root &__carinfo{
                    @include flexAuto;
                    padding: 0.15rem 0.2rem;
                    >h2{
                        font-size: 0.32rem;
                        color: #7d7d7d;
                        font-weight: bold;
                        line-height: 0.45rem;
                    }
                    >h3{
                        font-weight: bold;
                        font-size: 0.6rem;
                        color: #f9454b;
                        padding-left: 0.3rem;
                        position: relative;
                        line-height: 0.7rem;
                        >em{
                            font-size: 0.35rem;
                            position: absolute;
                            top: 0rem;
                            left: 0;
                            font-weight: bold;
                            text-indent: -1px;
                        }
                        >label{
                            font-size: 0.24rem;
                            color: #a8a8a8;
                            padding: 0 0.05rem;
                        }
                    }
                    >em{
                        font-size: 0.24rem;
                        line-height: 0.3rem;
                        position: relative;
                        top: -0.1rem;
                        &:after{
                            width: 106%;
                            height: 1px;
                            content: "";
                            background: #ed1b23;
                            position: absolute;
                            top: 0.1rem;
                            left: -3%;
                            transform: rotate(-6deg);
                        }
                    }
                }
            }
        }
    }

    


    @keyframes duang {
        0% {-webkit-transform: scale(0,0);}
        3.333333% { -webkit-transform: scale(.64545,.686015);}
        6.666667% { -webkit-transform: scale(.798425,.90691);}
        10% { -webkit-transform: scale(.92774,1.07226);}
        13.333333% { -webkit-transform: scale(1.01897,1.14684);}
        16.666667% { -webkit-transform: scale(1.07044,1.140885);}
        20% { -webkit-transform: scale(1.08847,1.08847);}
        23.333333% { -webkit-transform: scale(1.08303,1.02623);}
        26.666667% { -webkit-transform: scale(1.064445,.97964);}
        30% { -webkit-transform: scale(1.041375,.958625);}
        33.333333% { -webkit-transform: scale(1.01985,.960305);}
        36.666667% { -webkit-transform: scale(1.00322,.97507);}
        40% { -webkit-transform: scale(.99261,.99261);}
        43.333333% { -webkit-transform: scale(.98758,1.005735);}
        46.666667% { -webkit-transform: scale(.986835,1.01166);}
        50% { -webkit-transform: scale(.988815,1.011185);}
        53.333333% { -webkit-transform: scale(.99207,1.007025);}
        56.666667% { -webkit-transform: scale(.99549,1.002085);}
        60% { -webkit-transform: scale(.998385,.998385);}
        63.333333% { -webkit-transform: scale(1.000425,.996715);}
        66.666667% { -webkit-transform: scale(1.001575,.99685);}
        70% { -webkit-transform: scale(1.00198,.99802);}
        73.333333% { -webkit-transform: scale(1.001855,.999415);}
        76.666667% { -webkit-transform: scale(1.00144,1.000455);}
        80% { -webkit-transform: scale(1.000925,1.000925);}
        83.333333% { -webkit-transform: scale(1.000445,1.00089);}
        86.666667% { -webkit-transform: scale(1.00007,1.00056);}
        90% { -webkit-transform: scale(.999835,1.000165);}
        93.333333% { -webkit-transform: scale(.99972,.99987);}
        96.666667% { -webkit-transform: scale(.999705,.99974);}
        100% { -webkit-transform: scale(1,1);}
    }
</style>
 